<template>
  <div class='baseInfo'>
    <a-modal
      width="1100px"
      :footer='null'
      :visible="visible"
      :body-style="{ backgroundColor: '#1b384d' }"
      @update:visible="updateVisible"
      @cancel='updateVisible'
      destroyOnClose
      centered
    >
      <template #title>
        <div class='titleBox'>
          <div class='modalTitle'>基本信息</div>
        </div>
      </template>
      <div style='padding: 20px'>
        <div class='top'>
          <div class='topLeft'>
            <!--     两个图片     -->
            <div class='topLeftTop'>
              <div class='avatar'></div>
              <div class='score'>
                <span>12.32</span>
              </div>
            </div>
            <!-- 类别占比 -->
            <div class='topLeftBottom'>
              <div class='typeItem'>
                <type-icon index='1'></type-icon>
                <div style='margin-left: 10px'>
                  <div class='typeTitle'>战略决策类</div>
                  <span class='typeScore'>100</span><span style='color: white'>%</span>
                </div>
              </div>
              <div class='typeItem'>
                <type-icon index='2'></type-icon>
                <div style='margin-left: 10px'>
                  <div class='typeTitle'>贯彻执行类</div>
                  <span class='typeScore'>75</span>
                  <span style='color: white'>%</span>
                </div>
              </div>
              <div class='typeItem'>
                <type-icon index='3'></type-icon>
                <div style='margin-left: 10px'>
                  <div class='typeTitle'>管理控制类</div>
                  <span class='typeScore'>93.9</span>
                  <span style='color: white'>%</span>
                </div>
              </div>
              <div class='typeItem'>
                <type-icon index='4'></type-icon>
                <div style='margin-left: 10px'>
                  <div class='typeTitle'>担当作为类</div>
                  <span class='typeScore'>100</span>
                  <span style='color: white'>%</span>
                </div>
              </div>
              <div class='typeItem'>
                <type-icon index='5'></type-icon>
                <div style='margin-left: 10px'>
                  <div class='typeTitle'>廉洁从业类</div>
                  <span class='typeScore'>100</span>
                  <span style='color: white'>%</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 二级指标完成情况 -->
          <div class='topRight'>
            <div style='padding: 2px 2px 0 0;'>
              <span style='color: #58A2CC;font-size: 18px'>▣</span>
              <span style='font-weight: 700;font-size: 16px;color:#ffffff;'>&nbsp;&nbsp;二级指标完成情况</span>
              <img src='../../../assets/img/line.svg' style='width: 100%;height: 37px;margin-top: -50px'>
            </div>
            <secondary-indicators></secondary-indicators>
          </div>
        </div>

        <!-- 扣分清单分值 -->
        <div class='bottom'>
          <div style='padding: 2px 2px 0 0;'>
            <span style='color: #58A2CC;font-size: 18px'>▣</span>
            <span style='font-weight: 700;font-size: 16px;color:#ffffff;'>&nbsp;&nbsp;扣分清单分值</span>
            <img src='../../../assets/img/line.svg' style='width: 100%;height: 37px;margin-top: -50px'>
          </div>
          <demerit-points-list></demerit-points-list>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import TypeIcon from '@/views/homePage/components/businessCardCom/typeIcon';
import SecondaryIndicators from '@/views/homePage/components/businessCardCom/secondaryIndicators';
import DemeritPointsList from '@/views/homePage/components/businessCardCom/demeritPointsList';
export default {
  components: {
    TypeIcon,
    SecondaryIndicators,
    DemeritPointsList
  },
  name: 'riskModel',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    rowData: {},
  },
  data(){
    return{

    }
  },
  mounted() {
    console.log(this.rowData);
  },
  methods:{
    updateVisible() {
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style scoped lang='less'>
.titleBox{
  background-image: url("../../../assets/img/modalBg.png");
  background-repeat: no-repeat;
  height: 53px;
  padding: 12px 24px 14px 35px;
  background-color: #2a4a61;
}
.modalTitle{
  color: #ffffff;
  font-weight: 600;
}
.leaders {
  :global(.ant-modal-header) {
    padding: 0;
    border: 0;
  }
}

.top{
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 10px;
}
.topLeft{
    padding: 30px;
}
.topLeftTop{
  padding: 0 60px;display: flex;align-items: center;justify-content: space-between
}
.avatar{
  background-image: url("../../../assets/img/avatar.png");
  background-size: 100% 100%;
  width: 130px;
  height: 130px;
}
.score{
  background-image: url("../../../assets/img/scoreBg.png");
  background-size: 100% 100%;
  width: 160px;
  height: 160px;
  display: flex;align-items: center;justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 24px;
}

.topRight{
  background-color: #1d3d55;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.topLeftBottom{
  display: flex;align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.typeItem{
  display: flex;
  align-items: center;
  width: 33.3%;
  margin-top: 15px;
}
.typeTitle{
  color: #aaaaaa;
  font-size: 15px;
}
.typeScore{
  color: #ffffff;
  font-size: 32px;
  line-height: 38px;
}
.bottom{
  height: 350px;
  width: 100%;
}
</style>

